<template>
  <div class="box">
    <div class="left-box">
      <div class="content bg-box" :class="{ expandcontent: !isleftboxShow }">
        <div class="nav-box">
          <div @click="switcVideo('realTime')" :class="{ navboxxz: statelive !== 'realTime'}">实时视频</div>
          <div @click="switcVideo('history')" :class="{ navboxxz: statelive !== 'history'}">历史录像</div>
        </div>
        <RealTimeTree @playVideo="playVideo"></RealTimeTree>
      </div>

      <div class="control" @click="isleftboxShow = !isleftboxShow">
        <img v-show="isleftboxShow" src="/tree/left-sq.png">
        <img v-show="!isleftboxShow" src="/tree/left-zk.png">
      </div>
    </div>

    <div style="width: 10px"></div>

    <div class="right-box">
      <div style="height: 100%" v-if="statelive === 'realTime'">
        <LiveGbs ref="livgbs" ></LiveGbs>
      </div>
      <div style="height: 100%" v-else-if="statelive !== 'realTime'">
        <VideoGB ref="VideoGB" ></VideoGB>
      </div>


    </div>
  </div>
</template>

<script>
import useView from "@/hooks/useView";
import {defineComponent, reactive, ref, toRefs} from "vue";
import RealTimeTree from "./leftbox/realTimeTree.vue";
import LiveGbs from "./rightbox/livegbs.vue";
import VideoGB from "./rightbox/video.vue";

export default defineComponent({
  components: {
    RealTimeTree,
    LiveGbs,
    VideoGB
  },
  setup() {
    const state = reactive({
      isleftboxShow: true,
      fullfcreen: true,
      statelive: "realTime"
    });
    const flvurl = ref("http://192.168.0.3:28000/rtp/34020000001320000001_34020000001320000001.live.flv");
    return {...useView(state), ...toRefs(state), flvurl};
  },
  methods:{
    switcVideo(state){
      this.statelive = state;
    },
    playVideo(data) {
      if(data.type.includes("camera")){
        console.log(data.type,"-------")
        if (this.statelive === "realTime") {
          this.$refs.livgbs.playVideo(data);
        } else {
          this.$refs.VideoGB.treeHandle(data);
        }
      }
    }
  }
})
</script>

<style lang="scss">
.box {
  font-family: Source Han Sans CN;
  display: flex;
  padding: 40px 10px 20px 10px;
  position: relative;

  .bg-box {
    background-image: url(@/views/bigScreen/imgs/screen_bg_1.png);
    background-size: 100% 100%;
    border-radius: 6px;
  }

  .left-box {
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 999;

    .nav-box {
      display: flex;
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
      align-items: center;
      justify-content: space-around;

      div{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 46px;
        cursor: pointer;
      }
    }
    .navboxxz {
      background-image: url("/videox/nav-xz.png");
      background-size: 100% 100%;
    }

    .expandcontent {
      height: 100%;
      width: 0;
      overflow: auto;
      transition: width ease-out 0.2s;
    }
  }

  .content {
    height: 100%;
    width: 300px;
    overflow: auto;
    transition: width ease-in 0.2s;
  }

  .control {
    height: 120px;
    width: 22px;
    cursor: pointer;
    text-align: center;

    img{
      width: 100%;
      height: 100%;
    }
  }

  .right-box {
    flex: 1;
  }
}
</style>
